<script>
    let name = '';
    let pwd = '';

    async function register() {
        const response = await fetch('url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, pwd })
        });

        if (response.ok) {
            const result = await response.json();
            alert('Registration successful!');
        } else {
            alert('Registration failed: ' + response.statusText);
        }
    }
</script>

<div class="container">
    <div class="main">
        <div class="title h1">register</div>
        <div>
            name: <input class="input full-width" placeholder="请输入用户名" bind:value={name} type="text" />
        </div>
        <div>
            pwd: <input class="input full-width" placeholder="请输入密码" bind:value={pwd} type="password" />
        </div>
        <div>
            <button class="button is-primary full-width" on:click={register}>register</button>
        </div>
    </div>
</div>

<style>
    @import 'https://cdn.jsdelivr.net/npm/notyf/notyf.min.css';
    @import 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css';

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40vh; 
    }

    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 400px;
    }

    .title {
        text-align: center;
        width: 100%; 
    }

    .full-width {
        width: 100%;
        max-width: 600px;
    }

    div {
        padding: 0.5em;
        width: 100%;
    }

    .input, .button {
        width: 100%;
        max-width: 600px;
    }
</style>
